<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物业管理主页面</title>
    <link rel="icon" href="http://localhost:9000/building18/favicon.ico"/>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/axios-interceptors.js"></script>
    <script src="js/vue3.js"></script>
    <script src="js/element-plus.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css"/>

    <style>
        /* 基础样式设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f0f2f5;
            font-family: "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
        }

        .layout-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        /* 顶部区域 - 高贵深蓝色调 */
        .header {
            height: 64px;
            background: #0f3460;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid #1a4b8c;
        }

        .header-left {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 42px;
            margin-right: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .title {
            font-size: 22px;
            font-weight: 500;
            margin: 0;
            letter-spacing: 0.5px;
            color: #e6eef8;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .username {
            cursor: pointer;
            color: #e6eef8;
            display: flex;
            align-items: center;
            font-size: 14px;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .username:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* 主体区域 */
        .main {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* 左侧菜单 - 沉稳深色系与金色选中效果 */
        .sidebar {
            width: 230px;
            background: #162447;
            border-right: 1px solid #1e3a8a;
            padding-top: 0;
            transition: all 0.3s ease;
        }

        .el-menu {
            border-right: none;
            background-color: transparent;
        }

        /* 子菜单标题样式 */
        .el-sub-menu .el-sub-menu__title {
            color: #c9d1e3;
            height: 50px;
            line-height: 50px;
            font-size: 15px;
            background-color: #162447;
            border-left: 3px solid transparent;
            transition: all 0.3s ease;
        }

        .el-sub-menu .el-sub-menu__title:hover {
            color: #f8d698;
            background-color: #1e3a8a;
        }

        /* 选中的子菜单标题 - 金色样式 */
        .el-sub-menu .el-sub-menu__title.is-active {
            color: #f9d342;
            background-color: #1e3a8a;
            border-left: 3px solid #f9d342;
            font-weight: 500;
        }

        /* 菜单项样式 */
        .el-menu-item {
            color: #c9d1e3;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            padding-left: 50px !important;
            background-color: #1a2d59;
            transition: all 0.3s ease;
        }

        .el-menu-item:hover {
            color: #f8d698;
            background-color: #234183;
        }

        /* 选中的菜单项 - 金色样式 */
        .el-menu-item.is-active {
            color: #f9d342;
            background-color: #234183;
            font-weight: 500;
        }

        /* 链接样式适配 */
        .el-link {
            color: inherit;
        }

        .el-link:hover {
            color: #f9d342;
        }

        /* 右侧内容区域 - 增强阴影和形状感 */
        .content {
            flex: 1;
            background: #f0f2f7; /* 浅灰色底色 */
            padding: 20px; /* 增加内边距 */
            overflow: auto; /* 允许滚动 */
        }

        .content-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 8px; /* 稍大圆角增强形状感 */
            background-color: #ffffff; /* 白色内容区 */
            /* 增强阴影效果，使形状更明显 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
            0 1px 3px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

        .content-iframe:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1),
            0 2px 4px rgba(0, 0, 0, 0.08);
        }

        /* 下拉菜单样式调整 - 增大30%、优化颜色、增加动感 */
        .el-dropdown-menu {
            background-color: #ffffff; /* 与主体内容区一致的白色背景 */
            border: 1px solid #e5e7eb; /* 浅灰色细边框 */
            border-radius: 8px; /* 圆润圆角 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            min-width: 200px; /* 尺寸增大30%+ */
            padding: 8px 0;
            animation: dropdownSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* 滑入动画增加动感 */
        }

        @keyframes dropdownSlideIn {
            from {
                opacity: 0;
                transform: translateY(-8px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .el-dropdown-item {
            color: #374151; /* 深色文字，提高可读性 */
            background-color: transparent;
            transition: all 0.2s ease;
            font-size: 16px; /* 增大字体 */
            padding: 14px 28px; /* 增大内边距，整体更饱满 */
            line-height: 1.5;
            position: relative;
        }

        /* 优化选中/悬停状态 */
        .el-dropdown-item:hover,
        .el-dropdown-item:focus {
            background-color: #f3f4f6; /* 浅灰悬停背景，与白色主体区分 */
            color: #1e40af; /* 深蓝色文字，突出选中 */
        }

        /* 注销选项特殊样式 */
        .el-dropdown-item.logout-item {
            color: #dc2626; /* 红色文字，突出重要操作 */
        }

        .el-dropdown-item.logout-item:hover {
            background-color: #fee2e2; /* 浅红悬停背景 */
            color: #b91c1c; /* 深红文字，增强警示 */
        }

        /* 头像样式优化 */
        .el-avatar {
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        /* 图标颜色适配 */
        .el-icon {
            color: inherit;
        }

        .my-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 16px;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="layout-container">
        <!-- 顶部区域 -->
        <header class="header">
            <div class="header-left">
                <img class="logo" src="/imgs/logo.png" alt="Logo" />
                <h2 class="title">蜗牛楼宇管理系统</h2>
            </div>

            <div class="header-right">
                <el-avatar :size="40" :src="user.pic"></el-avatar>
                <el-dropdown>
          <span class="el-dropdown-link username">
            {{ user.username }}
            <el-icon><arrow-down /></el-icon>
          </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="handleEdit">个人信息编辑</el-dropdown-item>
                            <el-dropdown-item class="logout-item" @click="logOut">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </header>

        <!-- 内容区域 -->
        <div class="main">
            <!-- 左侧菜单 -->
            <aside class="sidebar">
                <el-menu default-active="1" class="el-menu-vertical-demo">
                    <el-sub-menu v-for="m1 in menus" :key="m1.sort" :index="m1.sort">
                        <template #title>{{m1.pname}}</template>
                        <el-menu-item v-for="m2 in m1.children" :key="m2.sort" :index="m2.sort">
                            <el-link :href="m2.url" target="contentFrame">{{m2.pname}}</el-link>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </aside>

            <!-- 右侧内容 iframe -->
            <section class="content">
                <iframe name="contentFrame" class="content-iframe"></iframe>
            </section>
        </div>
    </div>

    <!--用户编辑弹窗-->
    <div>
        <el-dialog title="编辑用户"
                   v-model="editDialogVisible"
                   width="450px">
            <el-form :model="userForm"
                     ref="userFormRef"
                     :rules="rules"
                     label-width="100px">

                <el-form-item label="id" prop="id">
                    <el-input v-model="userForm.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>

                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="userForm.oldPassword"></el-input>
                </el-form-item>

                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="userForm.newPassword"></el-input>
                </el-form-item>

                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="userForm.confirmPassword"></el-input>
                </el-form-item>


                <el-form-item label="海报" prop="avatar">
                    <!-- 预览区域 -->
                    <div class="poster-preview">
                        <img
                                v-if="userForm.pic"
                                :src="userForm.pic"
                                style="width: 100px; height: 120px; object-fit: cover; border-radius: 4px;"
                                alt="海报预览"
                        >
                        <div v-else style="width: 100px; height: 120px; background: #f5f7fa; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #909399;">
                            暂无海报
                        </div>
                    </div>

                    <!-- 上传区域 -->
                    <el-upload
                            class="poster-upload"
                            action="/api/upload"
                            :show-file-list="false"
                            :on-success="handlePosterUpload"
                            accept="image/jpeg,image/png"
                            style="margin-top: 10px;"
                    >
                        <el-button size="small" type="primary">选择海报</el-button>
                        <div style="font-size: 10px; color: #909399; margin-top: 5px;">
                            支持JPG、PNG格式，建议尺寸比例与预览一致
                        </div>
                    </el-upload>
                </el-form-item>

            </el-form>
            <template #footer>
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="handleSave">提交</el-button>
            </template>
        </el-dialog>
    </div>




<!--  跳转弹窗      -->
    <div>
        <el-dialog
            v-model="visible"
            :show-close="false"
            width="500"
            :modal="true"
            :close-on-click-modal="false"
            modal-class="custom-modal"
    >
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">您的登录信息已过期!</h4>
                <el-button type="danger" @click="handleJumpLogin">
                    <el-icon class="el-icon--left"><CircleCloseFilled></CircleCloseFilled></el-icon>
                    Close
                </el-button>
            </div>
        </template>
        即将重新登录....
    </el-dialog>

    </div>



</div>

<script>
    const {createApp, ref, reactive, onMounted, onUpdated} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    const app = createApp({

        setup() {
            const user = ref({});

            //获取头像和名字
            const getUserData = () => {
                axios.get(`/user/getUserData`).then(resp=>{
                    console.log(resp);
                    user.value = resp.data.obj;
                })
            }


            //用户编辑弹窗数据源
            const userForm=ref({});
            //弹窗控制
            const editDialogVisible = ref(false);

            //编辑摁钮
            const handleEdit = () => {
                userForm.value = user.value;
                console.log("userForm:============>", userForm.value);
                editDialogVisible.value = true;
            }

            const checkPassword = (rule, value, cb) => {
                if (value !== userForm.value.newPassword) {
                    cb(new Error('两次输入的密码不一致！'))
                } else {
                    cb()
                }
            }

            const rules = ref({

                oldPassword: [
                    { required: true, message: '原密码不能为空！', trigger: 'blur' },
                ],

                newPassword: [
                    { required: true, message: '新密码不能为空！', trigger: 'blur' },
                    {
                        pattern: /(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
                        message: '密码必须为6-12位字母+数字组合！',
                        trigger: 'blur'
                    }
                ],

                confirmPassword: [
                    {
                        validator: checkPassword,
                        trigger: 'blur'
                    },
                    { required: true, message: '确认密码不能为空！', trigger: 'blur' },
                    {
                        pattern: /(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
                        message: '密码必须为6-12位字母+数字组合！',
                        trigger: 'blur'
                    }
                ]
            });
            //用户编辑表单引用
            const userFormRef = ref(null);
            // 清空校验红字信息
            const clearValid = () => {
                if (userFormRef && userFormRef.value) {
                    userFormRef.value.resetFields();
                }
            }
            //用户编辑弹窗的取消方法
            const closeDialog = () => {
                clearValid();
                editDialogVisible.value = false;
            }

            //跳转弹窗显示控制
            const visible = ref(false)

            //用户编辑弹窗确认摁钮
            const handleSave = () => {
                console.log("进入确认摁钮",userForm.value);
                axios.put("/user/updateUserPassword", userForm.value).then((resp) => {
                    if (resp.data.code === 200) {
                        closeDialog();
                        ElMessage.success(resp.data.msg);
                        // 延迟1秒后显示跳转弹窗
                        setTimeout(() => {
                            visible.value = true;
                        }, 500);
                    }
                }).catch((error) => {
                    ElMessage.error(error.response.data.msg);
                    closeDialog();
                })
            }

            //跳转弹窗
            const handleJumpLogin=()=>{
                visible.value = false;
                window.location.href = "/index.html";
            }

            //用户注销摁钮
            const logOut = () => {
                axios.get("/user/logOut").then((resp) => {
                    ElMessage.success(resp.data.msg);
                    setTimeout(function () {
                        window.location.href = "/index.html";
                    }, 2000)
                }).catch(error=>{
                    ElMessage.error(error.response.data.msg);
                })
            }

            //查询当前登录用户的所有菜单权限
            const menus = ref([]);
            const getUserMenus = ()=>{
                axios.get("/permission/selectAllMenuPerms").then(resp=>{
                    menus.value = resp.data.obj;
                })
            }


            onMounted(()=>{
                getUserData();
                getUserMenus();
            })

            return{
                user,
                userForm,
                editDialogVisible,
                rules,
                menus,
                userFormRef,
                visible,
                getUserData,
                handleSave,
                logOut,
                checkPassword,
                handleEdit,
                getUserMenus,
                clearValid,
                closeDialog,
                close,
                handleJumpLogin,
            }
        }
    });
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 注册 Element Plus 图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app");
</script>
</body>
</html>